/**首页 */
// 数据引入区
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
import React from 'react'
import './index.css' // 首页样式

// action+state接口引入区域
// --------------------------------------------------------------------------------------------------------
import { add, sub } from './store/reducer' // redux中同步action方法
import { asynchronous } from './store/action' // redux中异步action方法

// redux全类型hooks引入
// --------------------------------------------------------------------------------------------------------
import { useAppDispatch, useAppSelector } from '../../utils/hooks'

// TS定义区
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
interface Props {} // props传参接口

// 页面书写区
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
const Index: React.FC<Props> = () => {
  // redux中hooks使用区域
  const index = useAppSelector((state) => state.index) // 获取本页面的index模块数据
  const dispatch = useAppDispatch() // 注册修改数据方法
  console.log(index)

  // dom元素区域
  // ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
  return (
    <div className="Index">
      {/* 增加 */}
      <span
        onClick={() => {
          dispatch(add(2))
        }}
      >
        +
      </span>
      {/* 数据展示 */}
      {/* -------------------------------------------------------------------------------------------------------- */}
      数据是 {index.num}
      {/* 减少 */}
      {/* -------------------------------------------------------------------------------------------------------- */}
      <span
        onClick={() => {
          dispatch(sub(1))
        }}
      >
        -
      </span>
      {/* 异步相加 */}
      {/* -------------------------------------------------------------------------------------------------------- */}
      <span
        onClick={() => {
          dispatch(asynchronous(1))
        }}
      >
        异步相加
      </span>
    </div>
  )
}

// 导出首页
export default React.memo(Index)
